<template>
	<view style="background-color: #FFFFFF;">
		<mescroll-body ref="mescrollRef" :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="{auto: false, bgColor: '#FFFFFF'}" :up="upOption">
			<hx-navbar ref="hxnb" :config="config" />
			<view style="margin-top:30rpx;padding:0 30rpx ;">
				<image src="../../static/install/213.png" mode="aspectFit" style="width:690rpx;height: 144rpx;"></image>
				<view class="sisters">
					<view class="piming flex align-center justify-between" style="padding:10rpx 30rpx;">
						<view v-for="(item,index) in list" :key="index" class="flex flex-direction justify-center">
							<image :src="item.image" mode="aspectFit" style="width: 150rpx;height: 186rpx;"></image>
							<view style="margin:20rpx 20rpx 0 20rpx ;color:#1E1E1E;font-size: 32rpx;font-weight: 600;">
								{{item.name}}
							</view>
							<view style="color: rgba(30,30,30,0.3);font-size: 24rpx;">{{item.paiming}}</view>

						</view>

					</view>
					<view class="flex align-center" style="padding:0 15rpx ;">
						<image src="/clientEnd/static/install/fire@2x.png" mode="aspectFit"
							style="width: 40rpx;height: 40rpx;"></image>
						<view style="font-size: 40rpx;color: #FFFFFF;font-weight: 650;margin-left: 10rpx;">业务排行</view>
						<image src="../../static/install/7944@2x.png" mode="aspectFit"
							style="width: 140rpx;height: 38rpx;margin-left:20rpx;"></image>
						<view style="font-size: 28rpx;color: #FFFFFF;margin-left:50rpx;">每日凌晨刷新榜单</view>
					</view>
				</view>
				<u-list @scrolltolower="scrolltolower" style="margin-top: 30rpx;" :height="phoneHeight + 'rpx'">
					<u-list-item v-for="(item, index) in listdata" :key="index"
						style="background: #ffffff;padding:30rpx 10rpx;">
						<view class="flex align-center" @tap="goindexPage(item.id)">
							<image :src="item.image" mode="aspectFit" style="width: 184rpx;height:228rpx;"></image>
							<view style="margin-left:30rpx;">
								<view class="flex align-center">
									<view style="color:#1E1E1E;font-size: 32rpx;font-weight: 600;">{{item.name}}</view>
									<!-- <view class="employment">{{item.information}}</view> -->
								</view>
								<view style="color: rgba(30,30,30,0.3);font-size: 24rpx">平台评分<text
										style="color: #F84949;font-size: 44rpx;margin-left: 5rpx;">{{item.score}}</text>
								</view>
								<view class="flex align-center" style="margin-top: 30rpx;">
									<image src="../../static/install/8300.png" mode="aspectFit"
										style="width:32rpx;height: 32rpx;"></image>
									<view class="medal">金牌安装</view>
								</view>
								<view style="color: rgba(30,30,30,0.3);font-size: 24rpx;margin-top: 30rpx;">
									{{item.signature}}
								</view>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; //引入滚动
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				upOption: {
					auto: false,
					empty: {
						tip: '~ 无更多数据 ~'
					},
					textNoMore: '--没有更多了--',
					noMoreSize: 3,
				},
				phoneHeight: 0,
				config: {
					title: '找安装',
					color: '#111111',
					backgroundColor: [1, '#FFFFFF'],
					border: true,
					// #ifdef H5
					backPage: '',
					// #endif
				},
				list: [{
						name: '尹师傅',
						image: '../../static/install/7946.png',
						paiming: 'ON.1'
					},
					{
						name: '王师傅',
						image: '../../static/install/7945.png',
						paiming: 'ON.2'
					},
					{
						name: '肖师傅',
						image: '../../static/install/7947.png',
						paiming: 'ON.3'
					},
				],
				listdata: []
			}
		},
		onLoad() {
			this.getList()
			this.installlist(1, 10)
		},
		methods: {
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			upCallback(e) {
				this.installlist(e.num, 10)
			},
			installlist(num, size) {
				let data = {
					pageNo: num,
					pageSize: size
				}
				this.$api.installList(data).then((res) => {
					if (num == 1) {
						this.listdata = res.data.result.list
					} else {
						this.listdata = this.listdata.concat(res.data.result.list)
					}
					console.log(this.listdata, '安装列表')
					this.mescroll.endBySize(res.data.result.list.length, res.data.result.total);
				})
			},
			getList() {
				let a = uni.getSystemInfoSync().statusBarHeight
				uni.getSystemInfo({
					success: (res) => {
						// 可使用窗口高度，将px转换rpx
						this.phoneHeight = ((res.windowHeight * (750 / res.windowWidth)) - (a * 20))
					}
				})

			},
			goindexPage(Id) {
				this.$tools.goPageNoAuth('./installindexPage?id=' + Id)
			},
			scrolltolower() {},
		}
	}
</script>

<style scoped>
	.sisters {
		width: 690rpx;
		height: 490rpx;
		margin-top: 38rpx;
		overflow: hidden;
		background: linear-gradient(288deg, #9F6D5A 0%, #492D22 100%);
		border-radius: 40rpx;
		opacity: 1;
	}

	.piming {
		background-color: #FFFFFF;
		width: 650rpx;
		height: 300rpx;
		border-radius: 30rpx;
		text-align: center;
		margin: 30rpx auto 30rpx auto;
	}

	.employment {
		width: 104rpx;
		height: 32rpx;
		border-radius: 6rpx;
		opacity: 1;
		border: 2rpx solid #FF801F;
		color: #FF801F;
		text-align: center;
		font-size: 20rpx;
		line-height: 32rpx;
		margin-left: 10rpx;
	}

	.medal {
		width: 102rpx;
		height: 32rpx;
		line-height: 32rpx;
		background: rgba(255, 128, 31, 0.19);
		border-radius: 4rpx;
		color: #F84949;
		text-align: center;
		font-size: 20rpx;
		margin-left: 15rpx;
		opacity: 1;
	}
</style>
